<template>
  <div class="main">
    <div class="cards">
      <div class="card-item"
           v-for="(card, index) in cards" :key="index"
           @click="clickItem(index)"
           @mouseenter="enterItem(index)"
           @mouseout="outItem()">
        <el-card :body-style="{ padding: '0' }" shadow="hover">
          <div class="card-img">
            <img :src=card.imgUrl alt="">
          </div>
          <div>
            <div class="title">{{card.title}}</div>
            <!--<div class="detail" v-show="itemSelected">
              {{detail}}
            </div>-->
            <div class="bottom">
              <div class="tag">
                <el-tag
                        v-for="item in card.tags"
                        :key="item.label"
                        :type="item.type"
                        effect="dark"
                        size="mini">
                  {{item.label}}
                </el-tag>
                <!--<img :src="url" alt="" class="tag-img">-->
                <i class="el-icon-picture"></i>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              layout="prev, pager, next"
              :pager-count="5"
              :page-size="12"
              :total=total>
      </el-pagination>
    </div>
    <el-backtop></el-backtop>
  </div>
</template>

<script>
  import axios from "axios";

  export default {
    name: "Main",
    data() {
      return {
        fit: 'cover',
        cards: [],
        itemSelected: false,
        currentPage: 1,
        total: 100,
        loading: true
      };
    },
    methods: {
      enterItem(index){
        // this.itemSelected = true
        // console.log(index)
      },
      outItem(index){
        // this.itemSelected = false
      },
      clickItem(index){
        this.$router.push("/details/"+index)
      },
      handleCurrentChange(val){
        axios.get("/api/home").then(res => {
          this.cards = res.data.cards.slice((val-1)*12, val*12)
        })
      },
    },
    beforeCreate() {
      axios.get("/api/home").then(res => {
        this.cards = res.data.cards.slice((this.currentPage-1)*12, this.currentPage*12);
        this.total = res.data.cards.length
      })
    },
    watch: {
      cards: {
        handler: function (val, oldVal) {
          if (oldVal.length === 0 && val.length > 0){
            this.$store.state.homeLoading = false;
          }
        }
      }
    }
  }
</script>

<style scoped>

  @media screen and (min-width: 1000px) {
    .main {
      margin: 40px auto;
      width: 68%;
    }

    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

  }

  @media screen and (min-width: 700px) and (max-width: 1000px){
    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .main {
      width: 90%;
      margin: 40px auto;
    }
  }
  @media screen and (max-width: 700px){
    .cards {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .main {
      margin: 0 auto;
    }
  }

  .cards {
    min-height: 550px;
  }

  .card-item {
    overflow: hidden;
    width: 290px;
    height: 300px;
    cursor: pointer;
    margin-bottom: 45px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 0 6px rgba(0, 0, 0, .03);
  }

  .card-item:hover {
    transform: scale(1.04);
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    transition: 200ms;
  }

  .card-item:hover .card-img {
    opacity: .7;
    /*padding-bottom: 40%;*/
    transition: 400ms;
  }

  .card-img {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 75%;
  }

  .card-img img {
    width: 100%;
  }

  .title {
    margin-top: 10px;
    font-size: 1.1em;
  }

  .bottom {
    margin: 20px 0 10px;
    line-height: 12px;
  }

  .tag {
    float: right;
    margin-right: 10px;
    margin-bottom: 15px;
  }

  .el-tag {
    margin-right: 7px;
  }

  .tag-img {
    display: inline-block;
    width: 20px;
    height: 20px;
  }

  .el-pagination {
    margin-top: 30px;
    transform: scale(1.1);
  }
</style>
